<template>
  <div class="list ui-center">
    <div class="item ui-flex align-center">
      <div class="title flex-1 ui-oneline">孔子学院举办2022年“孔子学院日”系列院日”系列活动活动</div>
      <div class="date">2024-1-20</div>
      <i class="icon"></i>
    </div>
    <div class="item ui-flex align-center">
      <div class="title flex-1 ui-oneline">孔子学院举办2022年“孔子学院日”系列院日”系列活动活动</div>
      <div class="date">2024-1-20</div>
      <i class="icon"></i>
    </div>
    <div class="item ui-flex align-center">
      <div class="title flex-1 ui-oneline">孔子学院举办2022年“孔子学院日”系列院日”系列活动活动</div>
      <div class="date">2024-1-20</div>
      <i class="icon"></i>
    </div>
    <div class="item ui-flex align-center">
      <div class="title flex-1 ui-oneline">孔子学院举办2022年“孔子学院日”系列院日”系列活动活动</div>
      <div class="date">2024-1-20</div>
      <i class="icon"></i>
    </div>
    <div class="item ui-flex align-center">
      <div class="title flex-1 ui-oneline">孔子学院举办2022年“孔子学院日”系列院日”系列活动活动</div>
      <div class="date">2024-1-20</div>
      <i class="icon"></i>
    </div>
    <div class="item ui-flex align-center">
      <div class="title flex-1 ui-oneline">孔子学院举办2022年“孔子学院日”系列院日”系列活动活动</div>
      <div class="date">2024-1-20</div>
      <i class="icon"></i>
    </div>
    <div class="item ui-flex align-center">
      <div class="title flex-1 ui-oneline">孔子学院举办2022年“孔子学院日”系列院日”系列活动活动</div>
      <div class="date">2024-1-20</div>
      <i class="icon"></i>
    </div>
  </div>
  <div class="page-box ui-flex justify-center">
    <div class="item">首页</div>
    <div class="item">上一页</div>
    <div class="item">第1/12页</div>
    <div class="item">下一页</div>
    <div class="item">尾页</div>
  </div>
</template>

<script setup></script>

<style lang="scss" scoped>
.list {
  padding: 70px 0 0 0;
  .item {
    font-size: 16px;
    color: #3d3d3d;
    line-height: 22px;
    cursor: pointer;
    .title {
      min-width: 0;
      padding: 19.5px 0;
    }
    .date {
      padding: 19.5px 0 19.5px 10px;
    }
    .icon {
      width: 120px;
      height: 61px;
      @include bgImg('@/assets/list/arrow.png');
    }
  }
}
.page-box {
  margin-top: 50px;
  .item {
    cursor: pointer;
    margin: 0 10px 0 0;
    font-size: 14px;
    color: #9e9e9e;
    line-height: 20px;
    padding: 10px 20px;
    border: 1px solid #dddddd;
    &:last-child {
      margin: 0;
    }
  }
}
</style>
